/** @jsxImportSource @emotion/react */
import * as React from "react";
import {css} from "@emotion/react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead, TextArea, BlobInputList,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";

//对比：上一版本模型不是通用的没用Hook;
const item检验项 = [
  ['铭牌', [{t:'罐体外观检验', s: 8}, ], '表面漆色、铭牌和标志', ],
  ['泄漏', [{} ], '裂纹、泄露、鼓包、变形、机械接触损伤', ],
  ['表腐蚀', [{} ], '内外表面的腐蚀' ],
  ['固螺栓', [{} ], '法兰密封面及其紧固螺栓', ],
  ['板罐连', [{}, ], '罐内防波板与罐体的连接' ],
  ['固定连', [{}], '罐内气（液）相管、液位计固定导架、排污疏水装置等与罐体的固定连接', ],
  ['附件口', [{}], '附件与罐体的接口' ],
  ['结霜露', [{}], '真空绝热罐体的外壳变形、机械接触损伤、结霜结露、油漆脱落、夹层珠光砂的沉降',  ],
  ['底盘连', [], '罐体与底盘连接检验' ],
  ['附属连', [], '附属设施连接检验', ],
  ['隔热', [], '隔热层检验',  ],
  ['导静电', [{t:'附件检验', s: 5}, ], '导静电装置', ],
  ['装卸阀', [{}], '装卸阀门',],
  ['快接头', [{}], '快装接头' ],
  ['气相接', [{}], '气（液）相接管',],
  ['他附件', [{}], '其他附件' ],
  ['安全阀', [{t:'安全附件检验', s: 6}, ], '安全阀', ],
  ['爆破片', [{}], '爆破片装置',],
  ['压力表', [{}], '压力表' ],
  ['液位计', [{}], '液位计',],
  ['测温仪', [{}], '测温仪表' ],
  ['切断装', [{}], '紧急切断装置' ],
  ['卸液信', [], '定点卸液信息跟综、反馈装置', ],
  ['组装', [], '组装检验' ],
  ['氨检漏', [], '氨检漏试验', ],
  ['油漆', [], '罐体外表面油漆检验' ],
];

interface Props extends InternalItemProps {
  iAname?: string[];
  part?: number;
}
export const itemA检验项: string[] = ['附页说明' ];
item检验项.forEach(([name, title, initIsp], i: number) => {
  itemA检验项.push(name as string);
});
//【项目表拆分有讲究】大数组拆几个小数组，没办法继承前缀部分的配置；所以要求不要从前缀标题的中间拆开，除非span也一起拆分配置加上{t:?,s:?}才行，否则编辑器没有完整的前缀描述区域信息。
const item检验项1=item检验项.slice(0,11);
const item检验项2=item检验项.slice(11,item检验项.length);
export const AppendixPage =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, part}: Props, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA检验项,);
      const baseSeq= part===1? 0: item检验项1.length;
      const config = part===1? item检验项1: item检验项2;
      const titNode=useOmnipotentPrefTitle({config, baseSeq});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    检查结果：
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={['√', '无此项', '—', '×']} rows={1}
                                   style={{display: 'inline-flex', width: '7rem', maxWidth: '100%', fontSize: '1.1rem',}}
                                   listStyle={css({fontSize: '1.4rem',})}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    备注：
                    <BlobInputList value={inp?.[name]?.m || ''}  rows={2}
                                   style={{display: 'inline-flex', width: '16rem', maxWidth: '100%',}}
                                   onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                  </div>
                </div>
              </React.Fragment>);
            })}
            <hr/>
            说明：
            <TextArea  value={inp?.附页说明 ||''} rows={6}
                       onChange={e => setInp({ ...inp, 附页说明: e.currentTarget.value||undefined}) } />
            <Text>
              注：检验结果栏中，打“√”的 表示无问题或者合格的检验项目，打“×”的表示有问题或者不合格的检验项目，填写“无此项”的表示实际没有的检验项目，划“—”的表示无法检验的项目。
            </Text>
            {children}
          </InspectRecordLayout>
      );
  });

const tailRender = (orc: any, name: string, lix: number, unit: any) => {
  const nneedbig = orc?.[name]?.r?.length >= 3 || (!orc?.[name]?.r);
  return <>
    <CCell><Text css={{fontSize: nneedbig ? '0.875rem' : '1.15rem'}}>{orc?.[name]?.r ?? '／'}</Text></CCell>
    <CCell>{orc?.[name]?.m ?? '／'}</CCell>
  </>;
}

export const AppendixPageVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const [renderP1,renderP2] = useOmnipotentPrefCs({orc, config: item检验项, split:[10],
              tag:'ApxIspItms', tailRender, pcols: 1, noNo: false, unitCel: false});
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
      <Text id='AppendixPage' variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>移动式压力容器年度检验报告附页</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["4%", "10%", "%",  "12%","29%"] }
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>检验项目</CCell><CCell>检查结果</CCell><CCell>备 注</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'AppendixPage'}>
          {renderP1}
        </RepLink>
        <RepLink rep={rep} tag={'ApxIspItms_12'}>
          {renderP2}
          <TableRow>
            <Cell split={true} colSpan={5}>
              <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                说明：<br/>{orc?.附页说明 || '／'}
              </div>
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck  orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
    </TailMenRowIspCheck>
    <Text css={{fontSize:'0.75rem'}}>
      注：检验结果栏中，打“√”的 表示无问题或者合格的检验项目，打“×”的表示有问题或者不合格的检验项目，填写“无此项”的表示实际没有的检验项目，划“—”的表示无法检验的项目。
    </Text>
  </>;
};
